<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .header{
                height: 500px;
                background:url('images/huibai.jpg') repeat-x;
            }
            .con{
                width: 968px;
                height: 376px;
                margin:47px auto 30px;
            }
            .footer{
                width: 968px;
                height: 51px;
                margin:0px auto;
            }
            .nav,.banner{
                width:968px;
                margin:0px auto;
            }
            .nav h1{
                float: left;
            }
            .nav ul{
                float: right;
            }
            .nav img{
                height: 43px;
                margin-top: 17px;
            }
            .nav li{
                float: left;
                margin-right: 18px;
                margin-top: 21px;
                padding:12px;
            }
            .nav li:hover{
                background:red;
                border-radius: 20px;
            }
            .nav a{
                color:#fff;
                font-size: 18px;
                text-decoration: none;
            }
             .nav{
                 height: 74px;
             }
             .banner .left{
                 float: left;
             }
             .banner .right{
                 float: right;
             }
             .banner h6{
                 font-size: 26px;
                 margin: 54px 0px 14px 0px;
                 font-weight: bold;
             }
             .banner .list li{
                 line-height: 31px;
                 font-size: 16px;
             }
             .banner .c li{
                 font-size: 12px;
                 line-height: 20px;
             }
             .banner .c a{
                 color:green;
                 text-decoration: none;
             }
             .con .left{
                 width: 631px;
                 float: left;
             }
             .con .right{
                 width: 322px;
                 float: right;
             }
             .con .left li{
                 float: left;
                 width: 214px;
             }
             .con .left .last{
                 width: 196px;
             }
             .con .right li{
                margin-bottom: 10px;
             }
             .con .right i{
                 color:red
             }
             .con .right span{
                 float: right;
             }
             .footer .left{
                 float: left;
             }
             .footer .right{
                 float: right;
             }
             .footer .bottom{
                 float: left;
                 width: 968px;
             }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="nav">
                <h1>
                    <a href="">
                        <img src="images/weixin.png" alt="">
                    </a>
                </h1>
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">帮助</a></li>
                    <li><a href="">公众平台</a></li>
                    <li><a href="">开放平台</a></li>
                    <li><a href="">支付</a></li>
                    <li><a href="">广告</a></li>
                    <li><a href="">企业微信</a></li>
                    <li><a href="">表情</a></li>
                    <li><a href="">网页版</a></li>
                </ul>
            </div>
            <div class="banner">
                <div class="left">
                    <h6>微信，是一个生活方式</h6>
                    <ul class="list">
                        <li>超过十亿人使用的手机应用
                        </li>
                        <li>支持发送语音短信、视频、图片和文字</li>
                        <li>
                            可以群聊，仅耗少量流量，适合大部分智能手机</li>
                    </ul>
                    <img src="images/mianfeixiazai.png" alt="">
                    <ul class="c">
                        <li>
                            <a href="">. 忘记了微信账号或密码?</a>
                        </li>
                        <li>
                            <a href="">. 自助解除登录或功能限制</a>
                        </li>
                        <li>
                            <a href="">. 冻结或解冻微信账号</a>
                        </li>
                    </ul>
                </div>
                <img src="images/shouji.png" alt="" class="right">
                
            </div>
        </div>
        <div class="con">
            <div class="left">
                <img src="images/diannao.png" alt="">
                <ul>
                    <li>
                        <h6>微信网页版</h6>
                        <p>扫一扫二维码</p>
                        <p>就能在浏览器上使用微信</p>
                        <a href="">了解更多</a>
                    </li>
                    <li>
                        <h6>微信 Mac 版</h6>
                        <p>极致简洁，迅捷沟通</p>
                        
                        <a href="">了解更多</a>
                    </li>
                    <li class="last">
                        <h6>微信 Windows 版</h6>
                        <p>让沟通更方便</p>
                        <a href="">了解更多</a>
                    </li>
                </ul>
            </div>
            <div class="right">
                <h6>最新消息</h6>
                <ul>
                    <li>
                       . 微信8.0.7 for iOS 发布     <i>NEW</i> <span>06-06</span>
                    </li>
                    <li>
                       . 微信8.0.6 for Android 发布 <i>NEW</i> <span>05-27</span>
                    </li>
                    <li>
                       . 微信3.0.0 for Mac 发布     <i>NEW</i> <span>03-29</span>
                    </li>
                    <li>
                       . 微信3.2.1 for Windows 发布 <i>NEW</i> <span>03-30</span>
                    </li>
                    <li>
                       . 关于iOS 9 用户无法更新微信  <i>NEW</i> <span>01-28</span>
                    </li>
                    <li>
                       . 微信外部链接内容管理规范    <i>NEW</i> <span>02-11</span>
                    </li>
                    <li>
                       . 微信网页版 2.1 版本发布     <i>NEW</i> <span>01-17</span>
                    </li>
                    <li>
                       . 微信表情开放平台上线        <i>NEW</i> <span>07-29</span>
                    </li>
                    <li>
                       . 官方辟谣公众号开通          <i>NEW</i> <span>10-28</span>
                    </li>
                    <li>
                       . 查看更多
                    </li>
                    <li>.联系我们</li>
                </ul>
            </div>
        </div>
        <div class="footer">
           <p class="left"> 关于腾讯 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引</p>
            <p class="right">简体中文 |  繁體中文 |  English</p>
           <p class="bottom">@1998 - 2021 Tencent lnc.All Rights Reserved</p>
        </div>
    </body>
</html>
